<template>
<view class="cu-modal drawer-modal justify-end"
	:class="show?'show':''"
	@tap="closeEvent"
	@touchmove.stop.prevent="preventhidden"
>
	<view class="cu-dialog bg-white"
		@tap.stop="preventhidden"
	>
		<scroll-view class="filter-list" 
			scroll-y
		>
			
			
			<view class="padding-lr" >
				<view class="cu-bar">
					<text class="text-black text-lg text-bold">难易程度</text>
				</view>
				<view class="grid text-center col-3 margin-bottom-xs">
					<view class="padding-sm radius text-center shadow-blur bg-gray" 
						v-for="(item, indexs) of gameEgreeList" 
						:key="indexs"
						:class="gameEgreeIndex == indexs?'line':''" 
						@click="selectF(indexs, 'gameEgreeIndex')"
					>{{item.confname}}</view>
				</view>
			</view>
			
			<view class="padding-lr" >
				<view class="cu-bar">
					<text class="text-black text-lg text-bold">风格</text>
				</view>
				<view class="grid text-center col-3 margin-bottom-xs">
					<view class="padding-sm radius text-center shadow-blur bg-gray" 
						v-for="(item, indexs) of gameTypeList" 
						:key="indexs"
						:class="gameTypeIndex == indexs?'line':''" 
						@click="selectF(indexs, 'gameTypeIndex')"
					>{{item.confname}}</view>
				</view>
			</view>
			
			
		</scroll-view>
		<view class="cu-bar justify-center solid-top foot">
			<view class="filter-btn padding-tb-lg">
				<button class="cu-btn line" @click="resetConfig">重置</button>
				<button class="cu-btn bg" @click="affirmConfig">确定</button>
			</view>
		</view>
	</view>
</view>
</template>

<script>
import { Scen } from '@/models/scen.js';
export default {
	name: 'scenFilter',
	data() {
		return {
			gameTypeIndex: -1,
			gameTypeList: [],
			gameEgreeIndex: -1,
			gameEgreeList: []
		}
	},
	mounted() {
		this.getSearchConfig()
	},
	props: {
		show: {
			type: Boolean,
			default: false
		}
	},
	methods: {
		
		async getSearchConfig() {
			let secnSearchConfig = await Scen.secnSearchConfig()
			this.gameTypeList = secnSearchConfig.style
			this.gameEgreeList = secnSearchConfig.egree
		},
		preventhidden() {
			return false
		},
		selectF(index, gameType) {
			this[gameType] = index
		},
		closeEvent() {
			this.$emit('closeTap');
		},
		resetConfig(){
			this.gameTypeIndex = -1
			this.gameEgreeIndex = -1
			this.$emit('resetConfig');
			this.$emit('closeTap');
		},
		getSelectType() {
			if(this.gameTypeIndex == -1) return ''
			return this.gameTypeList[this.gameTypeIndex].confid + "!"
		},
		getSelectEgree() {
			if(this.gameEgreeIndex == -1) return ''
			return this.gameEgreeList[this.gameEgreeIndex].confid + "!"
		},
		affirmConfig(){
			if(this.gameTypeIndex != -1 || this.gameEgreeIndex != -1){
				let style = this.getSelectType()
				let egree = this.getSelectEgree()
				this.$emit('affirmTap', {
					style,
					egree
				});
			}
			this.$emit('closeTap');
		}
	}
}
</script>

<style lang="scss" scoped>
.cu-dialog{
	width: 590upx;
	.filter-list{
		position: absolute;
		left: 0;
		right: 0;
		top: var(--status-bar-height);
		bottom: 145upx;
		.col-3{
			>view{
				width: calc((100% - 60upx)/3);
				transform: translate(0px, 0px);
				position: relative;
				display: inline-flex;
				align-items: center;
				justify-content: center;
				box-sizing: border-box;
				line-height: 1;
				text-align: center;
				margin-right: 30upx;
				margin-bottom: 30upx;
				&:nth-child(3n){
					margin-right: 0;
				}
			}
			.line{
				color: #2EB9C3;
				background-color: transparent;
				&::after{
					content: " ";
					display: block;
					width: 200%;
					height: 200%;
					position: absolute;
					top: 0;
					left: 0;
					border: 1upx solid currentColor;
					transform: scale(0.5);
					transform-origin: 0 0;
					box-sizing: border-box;
					border-radius: 12upx;
					z-index: 1;
					pointer-events: none;
				}
			}
		}
	}
	.cu-btn{
		height: 65upx;
		font-size: 12px;
		min-width: 180upx;
		color: #2EB9C3;
		background-color: #fff;
		~ .cu-btn {
			margin-left: 40upx;
		}
		&::after{
			border: 1px solid #2EB9C3;
		}
		&.bg{
			background-color: #2EB9C3;
			color: #fff;
		}
	}
	.slider-text{
		display: flex;
		justify-content: space-between;
		font-size: 20rpx;
		margin-top: -10rpx;
		padding-left: 10rpx;
		padding-right: 10rpx;
	}
}
</style>
